<template>
  <div class="download-list">
    <div class="list-header">
      <div class="col-name">文件名</div>
      <div class="col-size">大小</div>
      <div class="col-speed">速度</div>
      <div class="col-status">进度</div>
      <div class="col-actions">操作</div>
    </div>
    <div class="list-body">
      <div
        v-for="task in items"
        :key="task.id"
        class="list-item"
        :class="{ 'active': selectedId === task.id }"
        @click="$emit('select', task.id)"
      >
        <div class="col-name">
          <span class="file-icon">📄</span>
          <span class="file-name">{{ task.name }}</span>
        </div>
        <div class="col-size">{{ formatSize(task.size) }}</div>
        <div class="col-speed">{{ formatSpeed(task.speed) }}</div>
        <div class="col-status">
          <div class="progress-inline">
            <div class="progress-track">
              <div class="progress-bar" :style="{ width: progressOf(task) + '%' }"></div>
            </div>
            <div class="progress-text">{{ progressOf(task).toFixed(0) }}%</div>
          </div>
        </div>
        <div class="col-actions">
          <button class="icon-btn" @click.stop="$emit('pause', task.id)" v-if="task.status === 'downloading'" title="暂停">
            ⏸️
          </button>
          <button class="icon-btn" @click.stop="$emit('resume', task.id)" v-else title="开始">
            ▶️
          </button>
          <button class="icon-btn" @click.stop="$emit('remove', task.id)" title="删除">
            🗑️
          </button>
          <button class="icon-btn" @click.stop="$emit('details', task.id)" title="详情">
            🔎
          </button>
        </div>
        
      </div>
    </div>
  </div>
  
</template>

<script setup>
defineProps({
  items: { type: Array, default: () => [] },
  selectedId: { type: String, default: '' }
})

function progressOf(task){
  if (typeof task?.progress === 'number') return Math.max(0, Math.min(100, task.progress))
  const d = Number(task?.downloaded || 0)
  const s = Number(task?.size || 0)
  if (!s || s <= 0) return 0
  return Math.max(0, Math.min(100, (d / s) * 100))
}

function formatSize(bytes) {
  if (!bytes) return '0 B'
  const units = ['B', 'KB', 'MB', 'GB', 'TB']
  let size = parseFloat(bytes)
  let unitIndex = 0
  while (size >= 1024 && unitIndex < units.length - 1) {
    size /= 1024
    unitIndex++
  }
  return `${size.toFixed(2)} ${units[unitIndex]}`
}

function formatSpeed(bytesPerSecond) {
  if (!bytesPerSecond) return '0 B/s'
  return `${formatSize(bytesPerSecond)}/s`
}

function getStatusText(status) {
  const statusMap = {
    'downloading': '下载中',
    'paused': '已暂停',
    'completed': '已完成',
    'failed': '失败',
    'waiting': '等待中',
    'deleted': '已删除'
  }
  return statusMap[status] || status
}
</script>

<style scoped>
/* inline progress in list cell */
.progress-inline{ display:flex; align-items:center; gap:8px; width:100%; }
.progress-track{ position:relative; flex:1; height:6px; background:#455a64; border-radius:4px; overflow:hidden; }
.progress-bar{ position:absolute; left:0; top:0; bottom:0; height: 6px; background: var(--primary-color); transition: width .2s ease; }
.progress-text{ font-size:12px; color: var(--text-secondary); width:42px; text-align:right; }
</style>
